<template>
  <div class="dc-text-color sa-flex">
    <el-input
      v-model="modelValue.text"
      :placeholder="placeholder"
      :maxlength="maxlength"
      :show-word-limit="showWordLimit"
    ></el-input>
    <div class="color sa-flex">
      <img class="empty" src="/static/images/shop/decorate/picker.png" />
      <el-color-picker v-model="modelValue.color" />
    </div>
  </div>
</template>

<script setup>
  const emit = defineEmits(['update:modelValue', 'props']);
  const props = defineProps({
    modelValue: {
      type: Object,
    },
    placeholder: {
      type: String,
      default: '请输入',
    },
    maxlength: {
      type: [String, Number],
      default: '',
    },
    showWordLimit: {
      type: Boolean,
      default: false,
    },
  });

  function changeColor() {
    emit('update:modelValue', props.modelValue);
  }
</script>
<style lang="scss" scoped>
  .dc-text-color {
    width: 196px;
    :deep() {
      .el-input {
        flex: 1;
        .el-input__wrapper {
          border-radius: 4px 0 0 4px;
        }
      }
    }
    :deep() {
      .el-color-picker__trigger {
        display: flex;
        padding: 0;
        border-radius: 0 4px 4px 0;
        border-left: none;
        overflow: hidden;
        .el-color-picker__color {
          border: none;
        }
        .el-color-picker__empty {
          display: none;
        }
      }
    }
    .color {
      position: relative;
      .empty {
        width: 32px;
        height: 32px;
        border-radius: 0 4px 4px 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
  }
</style>
